<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="box">
		<template v-if="loginType === 'username'">
		  <label>Username</label>
		  <input placeholder="Enter your username">
		</template>
		<template v-else>
		  <label>Email</label>
		  <input placeholder="Enter your email address">
		</template>
		<button v-on:click="toggle">换啊换</button>
		<img v-show="ok" src="https://p2.ssl.qhimg.com/t01924eb45248eed2a1.jpg" alt="" />
		<button @click="xianshi">看啊看</button>
		<ul>
		   <template v-for="(v,i) of items ">
		   	  <li>{{ v.message }}</li>
		   	  <li>分割啊分割</li>
		   </template>
		</ul>
		{{ person.age }}===========
		<span v-for="(val,index) in person">
			{{index}} -- {{val}}
		</span>
		<br />
		<b v-for="(value, key, index) in person">
		  {{ index }}. {{ key }} : {{ value }}
		</b>
		
		<p v-for="todo in todos" v-if=" !todo.isComplete " v-bind:key="todo.id" >
			<span>事件名称：{{ todo.name }}</span>||
			<span>完成状态：{{ todo.isComplete ? "已经完成":"没做" }}</span>
		</p>
		
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el:"#box",
		data:{
			loginType:"username",
			ok:false,
			items: [
		      {message: 'Foo' },
		      {message: 'Bar' }
		    ],
		    person:{
		    	name:"占志强",
		    	age:20,
		    	sex:"男"
		    },
		    todos:[
		    	{
		    		id:1,
		    		name:"吃早饭",
		    		isComplete:true
		    	},
		    	{
		    		id:2,
		    		name:"吃中饭",
		    		isComplete:true
		    	},
		    	{
		    		id:3,
		    		name:"吃晚饭",
		    		isComplete:false
		    	}
		    	
		    ]
		},
		methods:{
			toggle:function(){
				this.loginType = this.loginType == "" ? "username" :"";
			},
			xianshi:function(){
				this.ok = this.ok ? false : true;
			}
		}
	})
</script>
</html>